<template>
    <div class="app-container">


      

                <el-form class="search-form" :model="queryParams" ref="queryRef" :inline="true" label-width="68px">

                    <el-form-item label="批次编号" prop="applyNo">
                        <el-input class="search-vitem" v-model="queryParams.applyNo" placeholder="批次编号" clearable
                            />
                    </el-form-item>

                    <el-form-item label="商户名称" prop="companyName">
                        <el-input class="search-vitem" v-model="queryParams.companyName" placeholder="公司名称" clearable
                           />
                    </el-form-item>
					<el-form-item label="小贷机构" prop="orgName">
					    <el-input class="search-vitem" v-model="queryParams.orgName" placeholder="小贷机构" clearable
					       />
					</el-form-item>

                   <!-- <el-form-item label="地区" prop="corporationTel">
                        <el-input class="search-vitem" v-model="queryParams.corporationTel" placeholder="地区" clearable
                            @keyup.enter="handleQuery" />
                    </el-form-item> -->
					
					<el-form-item label="状态" prop="orgFilesApplyStatus">
					    <el-select class="search-vitem" v-model="queryParams.orgFilesApplyStatus"
					        clearable filterable placeholder="状态">
					       <el-option
					         v-for="dict in org_files_apply_status"
					         :key="dict.value"
					         :label="dict.label"
					         :value="parseInt(dict.value)"
					       ></el-option>
					    </el-select>
					</el-form-item>

                    <el-form-item label="材料类型" prop="filesType">
                        <el-select class="search-vitem" v-model="queryParams.filesType"
                            clearable filterable placeholder="材料类型">
                           <el-option
                             v-for="dict in org_files_type"
                             :key="dict.value"
                             :label="dict.label"
                             :value="parseInt(dict.value)"
                           ></el-option>
                        </el-select>
                    </el-form-item>


                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>


                </el-form>

              
                <el-table v-loading="loading" :data="filesApplyList" @selection-change="handleSelectionChange" :row-style="{height: '46px'}">

                    <el-table-column fixed="left" label="批次编号" width="180" align="center" prop="applyNo"/>
                    <el-table-column label="材料类型" align="center" prop="filesType" fixed>
						<template #default="scope">
							 <dict-tag :options="org_files_type" :value="scope.row.filesType"/>       
						</template>
					</el-table-column>
                    <el-table-column label="包含材料" width="200" align="center" prop="filesArray" :show-overflow-tooltip="true" fixed/>
                    <el-table-column label="地区" width="150" align="center" prop="city" fixed/>
					<el-table-column label="状态" align="center" prop="orgFilesApplyStatus">
					  <template #default="scope">
					    <dict-tag :options="org_files_apply_status" :value="scope.row.orgFilesApplyStatus"/>
					  </template>
					</el-table-column>
                    <el-table-column label="商户" width="200" align="center" :show-overflow-tooltip="true" prop="companyName" />
                    <el-table-column label="小贷机构" width="200" align="center" :show-overflow-tooltip="true" prop="orgName" />
                    <el-table-column label="申请日期" width="150" align="center" prop="createDate" />
                    <el-table-column label="审核日期" width="150" align="center" prop="auditTime" />
                    <el-table-column label="快递单号" width="180" align="center" :show-overflow-tooltip="true" prop="expressNumber" />
                   
                    <el-table-column label="申请人" align="center" prop="createBy" />

                    <el-table-column label="操作" align="center" width="250" fixed="right"
                        class-name="small-padding fixed-width">
                        <template #default="scope">
							<!-- <el-button link type="primary" @click="handleOpen(scope.row,4)"
							    v-hasPermi="['system:filesApply:edit']">审核通过</el-button>
                           <el-button link type="primary" @click="handleOpen(scope.row,5)"
                               v-hasPermi="['system:filesApply:edit']">驳回</el-button> -->
                            <el-button link type="primary" @click="handleOpen(scope.row,3)"
                                v-hasPermi="['system:filesApply:query']">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize" @pagination="getApplyList"/>

         

        <!-- 弹出层 -->
        <el-dialog :title="materialsTitle" v-model="materialsOpen" width="1400px" append-to-body>
           
			<div v-if="materialsOpen" class="dialog-page">
		   
				<div class="dialog-navlist">
					<div class="nav-lsit">
			   
						<div @click="selectNavigation(index)" class="nav-item" v-for="(item, index) in leftNavigationItems" :key="index" :class="{ 'on': index === activeNavigation }">
							{{item}}
						</div>
			   
					</div>
		   
				</div>
		   
				<div class="dialog-custom">

                <!-- 查看批次 -->
					<div v-if="materialsType == 3" class="dialog-main"  ref="rightColumn">
                    <el-form ref="applyFilesRef" :inline="true" :model="applyFiles.form" :rules="materialsRule"
                        label-width="140px">
                        <!-- 申请信息 -->
                        <div class="dialog-item right-column" ref="rightColumnItem">
                            <div class="dialog-tbox">
                                <span>申请信息</span>
                            </div>
                            <div class="dialog-cont">

                                <el-form-item label="批次编号：">
                                        {{applyFiles.form.applyNo}}
                                </el-form-item>

                                <el-form-item label="助贷方：">
                                        {{applyFiles.form.zdfCompanyName}}
                                </el-form-item>

                                <el-form-item label="总材料押金(元)：">
                                        {{applyFiles.form.perPayAmount}}
                                </el-form-item>


                                <el-form-item label="材料类型：" >
                                    <dict-tag :options="org_files_type" :value="applyFiles.form.filesType"/>
                                </el-form-item>

                                <el-form-item label="地区：">
                                     {{applyFiles.form.province+'-'+applyFiles.form.city}}
                                </el-form-item>

                               <!-- <el-form-item label="材料包名称：" prop="licensePeriod">
                                    ZAXD-20231220-0201
                                </el-form-item> -->

                                <el-form-item label="通道方：" >
                                    {{applyFiles.form.orgName}}
                                </el-form-item>

                                <el-form-item label="收件人：">
                                   {{applyFiles.form.receiver}}
                                </el-form-item>
                                <el-form-item label="收件人手机号：">
                                   {{applyFiles.form.receiverPhone}}
                                </el-form-item>
								<el-form-item label="快递单号：">
                                   {{applyFiles.form.expressNumber}}
                                </el-form-item>

                                <el-form-item class="search-fitem" label="收件地址：">
                                     {{applyFiles.form.receiverAddress}}
                                </el-form-item>




                            </div>
                        </div>

                        <!-- 材料信息 -->
                        <div class="dialog-item right-column" ref="rightColumnItem">
                            <div class="dialog-tbox">
                                <span>材料信息</span>
                                <span class="tips"> 注意：请确认需回传材料，使用后及时回传材料扫描件</span>
                            </div>
                            <div class="dialog-cont">

                                <el-form-item class="search-fitem" label="申请套数：">
                                    {{applyFiles.form.applyNum}}
                                </el-form-item>

                                <el-table :data="applyFiles.form.fileList" border style="width: 100%">
                                    <el-table-column label="序号">
                                    	<template #default="scope">
                                    		{{ scope.$index + 1}}
                                    	</template>
                                    </el-table-column>
                                    <el-table-column prop="templateName" label="材料名称">
                                    </el-table-column>
                                    <el-table-column prop="applyNum" label="套数">
                                    </el-table-column>
                                    <el-table-column prop="defaultNum" label="默认份数">
                                    </el-table-column>
                                    <el-table-column label="用章类型">
										<template #default="scope">
										  <span v-if="scope.row.needCompanySeal==0">公章,</span>
										  <span v-if="scope.row.needLegalSeal==0">法人章</span>
										</template>
                                    </el-table-column>
                                   <el-table-column prop="isBack" label="是否需要回传">
                                   	<template #default="scope">
                                   	  <span v-if="scope.row.isBack==0">是</span>
                                   	  <span v-else>否</span>
                                   	</template>
                                   </el-table-column>
                                   <el-table-column prop="totalShareNum" label="总份数">
                                   	<template #default="scope">
                                   	  <span>{{scope.row.applyNum*scope.row.defaultNum}}</span>
                                   	</template>
                                   </el-table-column>
                                    <el-table-column label="操作">
                                        <template #default="scope">
                                            <!-- <a :href="scope.num" type="primary" icon="Edit">查看</a> -->
                                            <el-link :href="'https://'+scope.row.templateUrl" type="danger" target="_blank">查看</el-link>
                                        </template>
                                    </el-table-column>
                                </el-table>

                            </div>
                        </div>


                        <!-- 备注信息 -->
                        <div class="dialog-item right-column" ref="rightColumnItem">
                            <div class="dialog-tbox">
                                <span>备注信息</span>
                            </div>
                            <div class="dialog-cont">
                               {{applyFiles.form.remark}}
                            </div>
                        </div>
						
						<div class="dialog-item right-column" ref="rightColumnItem">
						    <div class="dialog-tbox">
						        <span>附件信息</span>
						    </div>
						    <div class="dialog-cont">
						       {{applyFiles.form.remark}}
							    <el-link :href="'https://'+applyFiles.form.otherFiles" type="danger" target="_blank">{{applyFiles.form.otherFilesName}}</el-link>
						    </div>
						</div>


                        <div class="dialog-item right-column" ref="rightColumnItem">
                            <div class="dialog-tbox">
                                <span>操作日志</span>
                            </div>
                            <div class="dialog-cont" style=" width: 1200px;overflow-x: auto;">
                                <div class="step">
                                    <div class="step-item" v-for="item in applyFiles.form.logList" :key="item.id">
                                        <div class="content">
                                            <div>操作人： {{item.operator}}</div>
                                            <div v-if="item.remark==null">备注：无</div>
											<div v-if="item.remark!=null">备注：{{item.remark}}</div>
                                            <div>{{item.createDate}}</div><!----><!---->
                                        </div>
                                        <div class="bottom">
                                            <div class="text" style="width: 100px;left:-40px;">{{item.operation}}</div>
                                            <div class="round"></div>
                                            <div class="line"></div>
                                        </div>
                                    </div>
                                   
                                </div>
                            </div>
                        </div>

                    </el-form>
					</div>

				</div>
			</div>
			<template #footer>
			    <div class="dialog-footer">
			        <el-button @click="cancel(1)">取 消</el-button>
					 <el-button type="primary" v-if="applyFiles.form.orgFilesApplyStatus==1" @click="handleOpen(null,1)">驳回</el-button>
			        <el-button type="primary" v-if="applyFiles.form.orgFilesApplyStatus==1" @click="handleOpen(null,2)">通过</el-button>
			    </div>
			</template>
		</el-dialog>
		
		
		<el-dialog :title="filehandle.title" v-model="filehandle.open" width="600px" append-to-body>
			<div class="dialog-custom">
				<div class="dialog-main">
					<el-form ref="filehandleRef" :inline="true" :model="filehandle.form" :rules="filehandle.rules" label-width="100px">
						<div class="dialog-item">
						
							<div class="dialog-cont">
								
								<el-form-item label="快递单号" v-if="filehandle.form.handleType==2" class="v100" style="width: 500px;" prop="expressNumber">
									<el-input class="search-vitem v100" v-model="filehandle.form.expressNumber" placeholder="快递单号" clearable />
								</el-form-item>
								<el-form-item v-if="filehandle.form.handleType==2" class="v100" style="width: 500px;" label="备注" prop="remark">
									<el-input class="search-vitem v100" type="textarea" v-model="filehandle.form.remark" placeholder="备注" clearable />
								</el-form-item>
								
								<el-form-item v-if="filehandle.form.handleType==1" class="v100" style="width: 500px;" label="驳回原因" prop="remark">
									<el-input class="search-vitem v100" type="textarea" v-model="filehandle.form.remark" placeholder="驳回原因" clearable />
								</el-form-item>
								
							</div>
						</div>
					</el-form>
				</div>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="cancel(2)">取 消</el-button>
					<el-button type="primary" @click="submitForm('filehandle')">确 定</el-button>
				</div>
			</template>
		</el-dialog>
		
		
	</div>
</template>

<script setup name="ApplyFiles">
import {ApplyFilesList,getApplyInfo,handleStatus} from "@/api/system/filesApply";

const orgRegionList = ref([]);
const orgOptions = ref([]);
const { proxy } = getCurrentInstance();

const { org_files_apply_status,org_files_type } = proxy.useDict('org_files_apply_status', 'org_files_type');
const filesApplyList = ref([]);
const orgList = ref([]);
const companyList = ref([]);
const open = ref(false);
const loading = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const activeName = ref('first');

const zdfName = ref('');
const materialsOpen = ref(false);
const materialsTitle = ref('材料申请信息');
const materialsType = ref(0);

const data = reactive({
	//订单驳回
	filehandle: {
		title:'',
		open: false,
		form: {
			handleType: null,
			expressNumber: null,
			remark: '',
			applyId: null,
		},
		resetForm: {
			handleType: null,
			expressNumber: null,
			remark: '',
			applyId: null,
		},
		rules: {
			'remark': [
				{ required: true, message: "不能为空", trigger: "blur" }
			],
			'expressNumber': [
				{ required: true, message: "快递单号不能为空", trigger: "blur" }
			],
		}
	},
	CascaderProps: {
		    value: 'name',
		    label: 'name',
		    children: 'list',
		},
	cityOpt: [],
	applyFiles:	{
		form: {},
		resetForm: {
			logList: [],
			fileList: [],
			citycode:[],
			orgTenantId: null,
			filesType: null,
			receiver:'',
			receiverPhone:'',
			receiverAddress:'',
			applyNum:1,
			province:null,
			city:null,
			applyId:null,
			},
		rules: {
			citycode: [
			  { required: true, message: "地区不能为空", trigger: "blur" }
			],
			orgTenantId: [
			  { required: true, message: "通道方不能为空", trigger: "blur" }
			],
			filesType: [
			  { required: true, message: "材料类型不能为空", trigger: "blur" }
			],
			receiver: [
			  { required: true, message: "收件人不能为空", trigger: "blur" }
			],
			receiverPhone: [
			  { required: true, message: "手机号不能为空", trigger: "blur" }
			],
			receiverAddress: [
			  { required: true, message: "收件地址不能为空", trigger: "blur" }
			],
			applyNum: [
			  { required: true, message: "申请套数不能为空", trigger: "blur" }
			],
		},	
	},
	filesParams:{
		type: null,
		tenantId: null,
		province: null,
		city: null,
		status:1,
	},
    form: {}, // 基本详情
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        companyName: null,
		orgName: null,
        filesType: null,
        orgFilesApplyStatus: null,
        applyNo: null,
    },
    materialsForm: {},
    materialsRule: {
        establishmentDate: [
            { required: true, message: "结清日期不能为空", trigger: "blur" }
        ],
    },
    
	leftNavigationItems: ['申请信息', '材料信息', '备注', '附件上传','操作日志']
});

const { filehandle,filesParams,applyFiles,queryParams, form, materialsForm, materialsRule,cityOpt,CascaderProps,leftNavigationItems } = toRefs(data);


const activeNavigation = ref(0);
	const rightColumn = ref(null);
	const isLock = ref(false);

	function selectNavigation(index) {
		// 开锁
		isLock.value = true
		activeNavigation.value = index;
		const rightColumnElement = rightColumn.value.$el;
		
		// console.log(rightColumnElement);
		
		// const targetElement = document.querySelectorAll('.right-column');
		const targetElement = document.querySelectorAll('.right-column')[index];
		
		// console.log(targetElement);
		
		targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });

		setTimeout(() => {
			//关锁
			isLock.value = false
		}, 2000)
	}



function applyInfo(applyId) {
    getApplyInfo(applyId).then(response => {
        var data = response.data;
		applyFiles.value.form=data;
		applyFiles.value.form.citycode = [response.data.province, response.data.city];
    });
}




/** 查询材料申请记录列表 */
function getApplyList() {
  loading.value = true;
  ApplyFilesList(queryParams.value).then(response => {
    filesApplyList.value = response.rows;
    total.value = Number(response.total);
    loading.value = false;
  });
}



/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getApplyList();
}

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.userId);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
}



// 取消按钮
function cancel(type = 0) {
	if(type==1)
	{
		materialsType.value = 0;
		materialsOpen.value = false;
		reset();
	}
   else if(type==2)
   {
	    filehandle.value.open=false;
		filehandle.value.form = JSON.parse(JSON.stringify(filehandle.value.resetForm));
		proxy.resetForm("filehandleRef");
   }
	
}

// 表单重置
function reset() {
    // 申请材料
    if (materialsType.value == 1) {
        materialsForm.value = {
            establishmentDate: null,
        };
        materialsTitle.value = "申请";
		applyFiles.value.form = JSON.parse(JSON.stringify(applyFiles.value.resetForm));
        proxy.resetForm("applyFilesRef");
    }
}

function handleOpen(row,type = 0) {
	 reset(type);
	 if(type==3)
	 {
		materialsType.value = type
		materialsOpen.value = true;
		const _applyId =row.applyId;
		applyInfo(_applyId); 
	 }
     else if(type==1)
	 {
		 filehandle.value.title="材料驳回";
		 filehandle.value.open=true;
		 filehandle.value.form.handleType=1;
		 filehandle.value.form.applyId=applyFiles.value.form.applyId;
	 }
	 else if(type==2)
	 {
	 		 filehandle.value.title="材料审核通过";
	 		 filehandle.value.open=true;
	 		 filehandle.value.form.handleType=2;
			 filehandle.value.form.remark="材料审核通过";
	 		 filehandle.value.form.applyId=applyFiles.value.form.applyId;
	 }
	
}

function submitForm(type) {
	
   proxy.$refs["filehandleRef"].validate(valid => {
       if (valid) {
           handleStatus(filehandle.value.form).then(response => {
               proxy.$modal.msgSuccess("提交成功");
               materialsOpen.value = false;
			   filehandle.value.open=false;
               getApplyList();
           });
       }
   });
}

// 创建结清证明





getApplyList();

</script>

<style lang="scss">


	
.four-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .four-item {
        width: calc((100% - 30px) / 4);
        height: 112px;
        background: #FFF5EF;
        border-radius: 16px;
        margin-right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;

        &:nth-child(4n) {
            margin-right: 0;
        }

        .four-img {
            width: 68px;
            height: 68px;
            display: block;
            flex-shrink: 0;
            margin-right: 14px;
        }

        .four-cont {
            line-height: 1;

            .four-tt {
                color: #333333;
                font-size: 12px;

                .big1 {
                    font-weight: 550;
                    color: #FF7C2F;
                    font-size: 28px;
                    padding-right: 2px;
                }

                .big2 {
                    color: #FF7C2F;
                    font-size: 14px;
                    padding-right: 2px;
                }
            }

            .four-dd {
                color: #666666;
                font-size: 12px;
                margin-top: 6px;
            }
        }
    }
}

.search-form {
    margin-top: 20px;

    .search-vitem {
        width: 230px !important;
    }

    .showline {
        width: 100%;
        height: 8px;
        background: #f4f7fc;
        margin-bottom: 25px;
        margin-top: 10px;
    }



    .checkbox-list {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 15px;

        .checkbox-item {
            width: 50%;
            font-size: 14px;
            display: flex;
            align-items: center;
        }
    }

    .showtext {
        width: 100%;
        font-size: 14px;
        margin-bottom: 15px;

        span {
            font-weight: 550;
            color: #FF6201;
        }
    }
}

.el-dialog__body {
   width: 100%;
   background: #FFFFFF;
   padding: 0;
}
.dialog-page {
		width: 100%;
		display: flex;
		height: 600px;


		.dialog-navlist {
			overflow-y: auto;
			width: 170px;
			height: 100%;
			// padding: 15px 20px;

			.nav-lsit {
				width: 100%;
				height: 100%;
				overflow-y: auto;

				.nav-item {
					width: 100%;
					height: 50px;
					width: 100%;
					line-height: 50px;
					color: #50565d;
					background-color: #f5f9ff;
					margin-bottom: 12px;
					text-align: center;
					border-radius: 4px;

					&.on {
						background: #FF6201;
						color: #FFFFFF;
					}

				}
			}

		}

	}
.dialog-custom {
    flex: 1;
    background: #f5f9ff !important;
    padding: 20px;
    height: 100%;

    .dialog-main {
        width: 100%;
        height: 100%;
        overflow-y: auto;

        .dialog-item {
            width: 100%;
            border-radius: 10px;
            background: #FFFFFF;
            overflow: hidden;


            &:not(:first-child) {
                margin-top: 20px;
            }

            .dialog-tbox {
                width: 100%;
                height: 48px;
                padding: 0 40px;
                font-size: 16px;
                font-weight: 550;
                border-bottom: 1px solid #e4efff;
                display: flex;
                align-items: center;
                position: relative;

                &::after {
                    content: '';
                    position: absolute;
                    left: 20px;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 3px;
                    height: 14px;
                    background: #FF6201;
                }

                .tips {
                    font-size: 12px;
                    padding-left: 14px;
                    color: red;
                    font-weight: normal;
                }
            }

            .dialog-cont {
                width: 100%;
                padding: 30px;
                box-sizing: border-box;
            }

            .search-fitem {
                width: 100%;

                &.v70 {
                    width: 63.5%;
                }

                &.v50 {
                    width: 45%;
                }
            }

            .showtips {
                padding-left: 140px;
                font-size: 14px;
                color: red;
            }

            .file-box {
                width: 100%;
                margin-top: 20px;

                .file-title {
                    padding-left: 16px;
                    position: relative;
                    font-size: 16px;
                    font-weight: 550;
                    line-height: 1;

                    &:after {
                        content: '';
                        width: 3px;
                        height: 100%;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        left: 0;
                        background: #FF6201;
                    }
                }

                .file-cont{
                    margin-top: 20px;
                }
            }

            .step {
                display: flex;
                width: 100%;
                background: #f6faff;
                margin-bottom: 60px;

                .step-item {
                    position: relative;
                    padding: 15px 30px;
                    background: #f6faff;

                    .content {
                        color: #50565d;
                        width: 250px;

                        div {
                            margin-block: 5px;
                        }
                    }

                    .bottom {
                        position: absolute;
                        bottom: -35px;
                        width: 100%;

                        .text {
                            position: absolute;
                            top: 25px;
                            left: -13px;
                            width: 50px;
                            text-align: center;
                        }

                        .round {
                            width: 24px;
                            height: 24px;
                            background-color: #FF6201;
                            border-radius: 50%;
                        }

                        .line {
                            display: inline-block;
                            width: 100%;
                            height: 4px;
                            background-color: #FF6201;
                            position: absolute;
                            top: 50%;
                            transform: translateY(-50%);
                            margin-right: 15px;
                        }
                    }
                }
            }

        }
    }


    .el-form-item {
        width: 30%;

        &.vvv2 {
            width: 35%;
        }

        .search-vitem {
            width: 220px !important;

            &.v70 {
                width: 58% !important;
            }

            &.v100 {
                width: 100% !important;
            }
        }
    }

}
</style>
